<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,div,img{
            margin: 0;
            padding:0;}
        #smallbox{
            width: 512px;
            height: 327px;
            position: relative;
            border:1px solid black;
            margin: 0 auto;
        }
        #bigbox{
            width: 400px;
            height: 300px;
            position: relative;
            border:1px solid black;
            margin: 0 auto;
            overflow:hidden;
            display: none;
         }
        #smallfloat{
            width:200px;
            height: 150px;
        }
        .floatbox{
            display:none;
            background: rgba(0,0,0,0.3);
            position: absolute;
            top:0;
            left:0;
        }
        #bigbox img{
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="smallbox">
        <div id="smallfloat" class="floatbox"></div>
        <img src="img/small.jpg" alt="">
    </div>
    <div id="bigbox">
        <img src="img/big.jpg" alt="">
    </div>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
       /*
       1.原生js*/
       var smallBox = document.getElementById("smallbox");
        var smallFloat = document.getElementById("smallfloat");
        var bigBox = document.getElementById("bigbox");
        var bigImg = bigBox.getElementsByTagName("img")[0];
        smallBox.onmouseenter = function(){
            smallFloat.style.display = "block";
            bigBox.style.display = "block";

        }
        smallBox.onmouseleave = function(){
            smallFloat.style.display = "none";
            bigBox.style.display = "none";
        }
        smallBox.onmousemove = function(event){
            var e = event||window.event;
            var left = e.clientX - smallBox.offsetLeft - smallFloat.offsetWidth/2;
            var top = e.clientY - smallBox.offsetTop - smallFloat.offsetHeight/2;
            if(left<0){
                left = 0;
            }else if(left>smallBox.offsetWidth-smallFloat.offsetWidth){
                left = smallBox.offsetWidth-smallFloat.offsetWidth;
            }
            if(top<0){
                top = 0;
            }else if(top>smallBox.offsetHeight-smallFloat.offsetHeight){
                top = smallBox.offsetHeight-smallFloat.offsetHeight;
            }
            smallFloat.style.left = left +"px";
            smallFloat.style.top = top +"px";
            bigImg.style.left = -left/smallBox.offsetWidth * bigImg.offsetWidth + "px";
            bigImg.style.top = -top/smallBox.offsetHeight * bigImg.offsetHeight + "px";
        }
       /* 面向对象   参数：id(小图) stress(大图)
       function Amplify(ele,stress){
           this.id = document.getElementById(ele);
           this.smallFloat = this.id.getElementsByTagName("div")[0];
           this.stress = document.getElementById(stress);
           this.bigImg = this.stress.getElementsByTagName("img")[0];
           this.init();
       }

       Amplify.prototype.change = function(event){
           var e = event||window.event;
           var left = e.clientX - this.id.offsetLeft - this.smallFloat.offsetWidth/2;
           var top = e.clientY - this.id.offsetTop - this.smallFloat.offsetHeight/2;
           if(left<0){
               left = 0;
           }else if(left>this.id.offsetWidth - this.smallFloat.offsetWidth){
               left = this.id.offsetWidth - this.smallFloat.offsetWidth;
               console.log(left);
           }
           if(top<0){
               top = 0;
           }else if(top > this.id.offsetHeight - this.smallFloat.offsetHeight){
               top = this.id.offsetHeight - this.smallFloat.offsetHeight;
           }
           this.smallFloat.style.left = left + "px";
           this.smallFloat.style.top = top + "px";
           this.bigImg.style.left = -left/this.id.offsetWidth * this.bigImg.offsetWidth + "px";
           this.bigImg.style.top = -top/this.id.offsetHeight * this.bigImg.offsetHeight + "px";

       }
       Amplify.prototype.init = function(){
           var _this = this;
           this.id.onmouseenter = function(){
               _this.smallFloat.style.display = "block";
               _this.stress.style.display = "block";
           }
           this.id.onmouseleave = function(){
               _this.smallFloat.style.display = "none";
               _this.stress.style.display = "none";
           }
           this.id.onmousemove = function(){
               _this.change();
           }
       }
    var amplify = new Amplify("smallbox","bigbox");*/
       /*jquery方法
       $(function(){
           $("#smallbox").hover(function(){
               $("#smallfloat").show();
               $("#bigbox").show();
           },function(){
               $("#smallfloat").hide();
               $("#bigbox").hide();
           })
           $("#smallbox").on("mousemove",function(event){
               var left = event.pageX - $("#smallbox").offset().left  - $("#smallfloat").outerWidth()/2;
               var top = event.pageY - $("#smallbox").offset().top  - $("#smallfloat").outerHeight()/2;
               if(left<0){
                   left = 0;
               }else if(left>$("#smallbox").innerWidth()-$("#smallfloat").outerWidth()){
                    left = $("#smallbox").innerWidth()-$("#smallfloat").outerWidth();
               }
               if(top<0){
                   top = 0;
               }else if(top>$("#smallbox").innerHeight()-$("#smallfloat").outerHeight()){
                   top = $("#smallbox").innerHeight()-$("#smallfloat").outerHeight();
               }
               $("#smallfloat").css({
                   left: left+"px",
                   top: top+"px"
               })
               $("#bigbox img").css({
                   left: -left/$("#smallfloat").outerWidth() * $("#bigbox").outerWidth() + "px",
                   top: -top/$("#smallfloat").outerHeight() * $("#bigbox").outerHeight() + "px"
               })
           })
       })*/







    </script>
</body>
</html>